<template>
	<view class="page">
		<view class="Fonttextbox  louis-padding-lf-0 louis-relative">
			<view class="Fonttext louis-font-pixel louis-absolute ">

			</view>
			<louis-back>

			</louis-back>
			<image class="louis-w-max " src="http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200812/20200812/0.94817400%20159722401914ee22eaba297944c96afdbe5b16c65b.jpeg"
			 mode="widthFix"></image>
		</view>



		<view class="font">
			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-动画-秒数"
					</text>
				</view>
			</view>


			<view v-for="(item,index) in list" :key="index" @tap="tapclass(item,index)" :class="item.hoverclass" class="Basics louis-bg-transparent louis-relative louis-color-fff">
				<view class="louis-space-between louis-margin-tb-2">
					<louis-view class="louis-relative" >
						<view class="louis-inline-block ">
							<text :class="'louis-icon-'+item.icon" class="louis-color  louis-40rpx"></text>
						</view>

					</louis-view>
					<louis-view w="200rpx" class="louis-font-right louis-line-height-50rpx">{{item.name}}</louis-view>
					<louis-view w="240rpx"  class="louis-font-right  louis-line-height-50rpx">{{item.class}} </louis-view>
				</view>
			</view>




			
			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-infinite" 重复动画
					</text>
				</view>
			</view>
			<view class="Basics louis-bg-transparent louis-color-fff">
				<view class="louis-flex-between louis-margin-tb-2">
					<louis-view v-for="(item,index) in list" :key="index" :class="item.class" class="louis-relative louis-infinite">
						<view class="louis-inline-block louis-relative">
							<text :class="'louis-icon-'+item.icon" :top="item.icon=='sports'?'10rpx':''" class="louis-color  louis-40rpx"></text>
						</view>
					</louis-view>
				</view>
			</view>

<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						hover-class="louis-动画-秒数" 点击动画
					</text>
				</view>
			</view>

			<view class="Basics louis-bg-transparent louis-color-fff">
				<view class="louis-flex-between louis-margin-tb-2">
					<louis-view v-for="(item,index) in list" :key="index" class=" louis-relative">
						<view :hover-class="item.class" :hover-stay-time="2000" class="louis-inline-block ">
							<text :class="'louis-icon-'+item.icon" class="louis-color  louis-40rpx"></text>
						</view>
					</louis-view>
				</view>
			</view>



			<view class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						class="louis-animation-reverse" 倒放动画
					</text>
				</view>
			</view>
			<view class="Basics louis-bg-transparent louis-color-fff">
				<view class="louis-flex-between louis-margin-tb-2">
					<louis-view v-for="(item,index) in list" :key="index" class=" louis-relative">
						<view :hover-class="item.class" :hover-stay-time="2000" class="louis-inline-block louis-animation-reverse">
							<text :class="'louis-icon-'+item.icon" class="louis-color  louis-40rpx"></text>
						</view>
					</louis-view>
				</view>
			</view>

			<view style="background-color: rgba(243,31,31,0.6);" class="Basics Basicsred" color="#fff">
				<view class="louis-font-25 louis-text-center">

					<text class="louis-font-25 ">
						注意事项
					</text>
				</view>
			</view>
			<view class="Basics  louis-bg-transparent louis-color-fff">
				<view class=" louis-m-1p ">
					秒数必须为正整数，最大值为10
				</view>
				<view class=" louis-m-1p louis-m-tb-2p">
					可使用JS绑定动态类的方式使用
				</view>
				<view class=" louis-m-1p">
					uni可使用hover-class，注意hover-stay-time
				</view>
				<view class="louis-m-1p louis-m-tb-2p">
					如有疑惑请立即阅读uni官方文档view标签部分
				</view>
				<view class=" louis-m-1p">
					我想你会乐在其中的。
				</view>
			</view>




		</view>




<louis-view p="20rpx">
	
	
</louis-view>



	</view>
</template>






<script>
	export default {
		data() {
			return {
				fontstyle: false,
				morecolor: false,
				list: [{
						name: "渐隐",
						class: "louis-fade-out-2",
						hoverclass: "",
						icon: "discoverfill"
					},
					{
						name: "星动",
						class: "louis-fade-2",
						icon: "favorfill",
						hoverclass: ""
					},
					{
						name: "心动",
						class: "louis-duang-2",
						icon: "aixin",
						hoverclass: ""
					},
					{
						name: "抖音",
						class: "louis-shake-1",
						icon: "yanchu1",
						hoverclass: ""
					},
					{
						name: "渐大",
						class: "louis-popup-2",
						icon: "dianzan",
						hoverclass: ""
					},
					{
						name: "渐上",
						class: "louis-slide-top-2",
						icon: "pullup",
						hoverclass: ""
					},
					{
						name: "渐下",
						class: "louis-slide-bottom-2",
						icon: "pulldown",
						hoverclass: ""
					},
					{
						name: "渐左",
						class: "louis-slide-left-2",
						icon: "pullleft",
						hoverclass: ""
					},
					{
						name: "渐右",
						class: "louis-slide-right-2",
						icon: "pullright",
						hoverclass: ""
					},
					{
						name: "旋转",
						class: "louis-rotate-2",
						icon: 'pengyouquan',
						hoverclass: ""
					}

				]


			};
		},
		mounted() {

		},
		methods: {
			tapclass(item, index) {
				// item.hoverclass=item.class
				this.list[index].hoverclass = item.class
				setTimeout(()=>{this.list[index].hoverclass=''}, 2000);

			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background-image: linear-gradient(#ffbee9, #a0a1f1);
		// background-image: none;
		// overflow: hidden;
	}

	.Fonttextbox {

		// height: 4000rpx;
		// overflow: hidden;
		// background-image: linear-gradient(#ffbee9, #a0a1f1);
		// background-image: linear-gradient(#ffbee9, #a0a1f1);
	}

	.Fonttext {
		// -webkit-text-stroke: 1px #6893a0;
		position: absolute;
		z-index: 200;
		color: rgba(255, 255, 255, 0.5);
		width: 100%;
		height: 100%;
		top: 350rpx;
		right: 10rpx;
		width: 200rpx;
		font-size: 48rpx;
		transform: skewX(25deg);
		// color: black;
	}

	.Basics {

		color: #FFF;
		font-size: 25rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 2px solid #FFFFFF;
		box-sizing: border-box;
		background-color: #6167b3;
		padding-top: 15rpx;
		padding-bottom: 20rpx;

	}

	.Basicsred {
		background-color: #b581c3;


	}

	// .font {
	// 	margin-top: 20rpx;
	// }
</style>
